import BaseComponent from "http://component.119safe.cn/component/base.js";

new class Top extends BaseComponent
{
	/*
	 * menu			菜单容器(jquery)，当小尺寸时会隐藏菜单，通过点击左上角图标切换菜单可见性，默认为#sidebar
	 * user-name	当前用户名
	 */
	Properties = { "menu": "#sidebar", "user-name": "" };

	InnerContainer = "ul[loginout]";

	render() { super.render(this.constructor.name); }

	Content = `
<div id="navbar" class="navbar navbar-default ace-save-state">
		<div class="navbar-container ace-save-state" id="navbar-container">
			<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="{menu}">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>

			<div class="navbar-header pull-left">
				<a class="navbar-brand">
					<small>消防工程精英汇</small>
				</a>
			</div>

			<div class="navbar-buttons navbar-header pull-right" role="navigation">
				<ul class="nav ace-nav">
					<li class="green dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="">
							<i class="ace-icon fa" style="width:1px"></i>
							<span class="badge badge-transparent" style="margin-top: 5px">{user-name}</span>
						</a>

						<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header"></li>

							<li class="dropdown-content ace-scroll" style="position: relative;">
								<div class="scroll-track" style="display: none;">
									<div class="scroll-bar"></div>
								</div>
								<div class="scroll-content" style="max-height: 200px;">
									<div class="scroll-track" style="display: none;">
										<div class="scroll-bar"></div>
									</div>
									<div class="scroll-content" style="max-height: 200px;">
										<ul loginout class="dropdown-menu dropdown-navbar">
										</ul>
									</div>
								</div>
							</li>

							<li class="dropdown-footer"></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
`;
}().render();
